<template>
  <!--列表项组件-->
    <div @click="jumpToDetails">
        <ItemImg :image-detail="imageDetail"/>
        <div class="song-description mouse-cursor-default">
            <div
                    :class="{'song-info':true, 'song-center':!itemDescription.titleIsLeft,'song-left':itemDescription.titleIsLeft}">
                {{ title }}
            </div>
            <div class="song-author" v-show="itemDescription.hasAuthor">
                {{ author }}
            </div>
        </div>
    </div>
</template>

<script>
import ItemImg from "@/minicomponents/ItemImg.vue";
import {formatBigNum} from "@/http/tools";
import {
    ALBUMLIST,
    ALUBMLISTNOAUTHOR,
    ALUBMLISTNOAUTHORWITHTYPE,
    RECSONGLIST,
    SINGERLIST, SINGERSMVs, SINGERSMVsNOTIME,
    TOPLIST
} from "@/http/constant";

export default {
    name: "ListItem",
    components: {ItemImg},
    props: ['itemDescription'],
    data() {
        return {
            isPlayIcon: false,
            picUrl: 'https://p2.music.126.net/wRiwy65LSxv9X43B-zlBMA==/109951163550232716.jpg',
            title: '正在加载...',
            playCount: '0',
            author: '正在加载...',
            isCircle: false,
        }
    },
    methods: {
        // 点击后调转至详情页面
        jumpToDetails() {
            const {itemType, id} = this.itemDescription
            // 点击推荐歌单项时
            if (itemType === RECSONGLIST || itemType === TOPLIST) {
                this.$router.push({
                    name: 'song-detail',
                    params: {
                        id
                    }
                })
            } else if (itemType === ALBUMLIST || itemType === ALUBMLISTNOAUTHOR || itemType === ALUBMLISTNOAUTHORWITHTYPE) {
                // 点击专辑的时候跳转
                this.$router.push({
                    name: 'album-detail',
                    params: {
                        id
                    }
                })
            } else if (itemType === SINGERLIST) {
                // 点击歌手时跳转
                this.$router.push({
                    name: 'singer-detail',
                    params: {
                        id
                    }
                })
            } else if (itemType === SINGERSMVs || itemType === SINGERSMVsNOTIME) {
                // 跳转mv
                this.$router.push({
                    name: 'mv-detail',
                    params: {
                        id
                    }
                })
            }
        }
    },
    computed: {
        imageDetail() {
            return {
                picUrl: this.picUrl,
                isShowInfo: this.itemDescription.hasPlayCount,
                isRound: this.itemDescription.isCircle,
                playCount: this.playCount,
                hasPlayIcon: this.itemDescription.hasPlayIcon
            }
        }
    },
    watch: {
        itemDescription: {
            immediate: true,
            deep: true,
            handler(newVal) {
                this.picUrl = newVal?.picUrl || ''
                if (newVal && newVal.playCount) {
                    this.playCount = formatBigNum(newVal.playCount)
                } else {
                    this.playCount = '0'
                }
                this.title = newVal?.title || '标题加载失败'
                this.author = newVal?.author || ''
            }
        }
    }
}
</script>

<style scoped lang="less">

.song-description {
  .song-info {
    font-size: 18px;
    font-weight: 700;
    /*多行文字溢出显示省略号*/
    overflow: hidden;
    text-overflow: ellipsis;
    /*弹性盒子模型显示*/
    display: -webkit-box;
    /*限制在一个块元素内显示文本的行数*/
    -webkit-line-clamp: 2;
    /*设置或检索伸缩盒对象的子元素的排列方式*/
    -webkit-box-orient: vertical;
  }

  .song-left {
    text-align: left;
  }

  .song-center {
    text-align: center;
  }

  .song-author {
    font-size: 1rem;
    color: #737373;
    margin-top: .5vh;
  }
}
</style>